<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="orders">
        <navigation :msg='navMsg'></navigation>
        <NavSearch :searchData="searchData"></NavSearch>
        <el-table :height="tableHeight"
                  :data="ordersData">
          <el-table-column type="selection"
                           min-width="4%"
                           style="display:none">
          </el-table-column>
          <el-table-column label="单号"
                           sortable
                           min-width="10%">
            <template slot-scope="scope">
              <div class="ordernum"
                   :title="scope.row.num.num">
                <span v-for="(item,index) in scope.row.num.id"
                      :key="index"
                      v-show="item == 2 || item == 1"
                      :class="item == 1 ? 'dai' : 'te'">{{item == 1 ? '代' : '特'}}</span>
                <span>{{scope.row.num.num}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="客户"
                           min-width="12%">
            <template slot-scope="scope">
              <div :title="scope.row.name">
                {{scope.row.name}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单金额"
                           min-width="8%">
            <template slot-scope="scope">
              <div :title="scope.row.orderPrice">
                {{scope.row.orderPrice}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="已收金额"
                           min-width="8%">
            <template slot-scope="scope">
              <div :title="scope.row.acceptedPrice">
                {{scope.row.acceptedPrice}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单据状态"
                           min-width="8%">
            <template slot-scope="scope">
              <div style="color:#f00">
                <span v-if="scope.row.billStatus == 1"
                      style="color:#000">已完成</span>
                <span v-if="scope.row.billStatus == 2">待订单审核</span>
                <span v-if="scope.row.billStatus == 3">待出库</span>
                <span v-if="scope.row.billStatus == 4">待财务审核</span>
                <span v-if="scope.row.billStatus == 5">待发货(部分)</span>
                <span v-if="scope.row.billStatus == 6">待提交</span>
                <span v-if="scope.row.billStatus == 7">待发货</span>
                <span v-if="scope.row.billStatus == 8"
                      class="zuofei">已作废</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="财务状态"
                           min-width="8%">
            <template slot-scope="scope">
              <div style="color:#f00">
                <span v-if="scope.row.financeStatus == 1"
                      style="color:#000">已完成</span>
                <span v-if="scope.row.financeStatus == 2">待收款</span>
                <span v-if="scope.row.financeStatus == 3">待收款(部分)</span>
                <span v-if="scope.row.financeStatus == 4"
                      class="zuofei">已作废</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="售后状态"
                           min-width="6%"
                           prop="afterSaleStatus">
          </el-table-column>
          <el-table-column label="交货日期"
                           min-width="6%"
                           prop="deliveryDate">
          </el-table-column>
          <el-table-column label="制单人"
                           min-width="6%">
            <template slot-scope="scope">
              <div :title="scope.row.maker">
                {{scope.row.maker}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所属员工"
                           min-width="6%"
                           prop="staff">
            <template slot-scope="scope">
              <div :title="scope.row.staff">
                {{scope.row.staff}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="提交时间"
                           min-width="6%"
                           sortable
                           prop="subDate">
            <template slot-scope="scope">
              <div :title="scope.row.subDate">
                {{scope.row.subDate}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单备注"
                           min-width="7%"
                           prop="remarks">
            <template slot-scope="scope">
              <div :title="scope.row.remarks">
                {{scope.row.remarks}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="打印次数"
                           min-width="5%"
                           prop="printing">
            <template slot-scope="scope">
              <div :title="scope.row.printing">
                {{scope.row.printing}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Paging :msg="50"
                @pageNum="getPageNum"
                @pageId="getPageId"></Paging>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import NavSearch from '@/components/common/navSearch/NavSearch'
import Paging from '@/components/common/paging/Paging'
import navigation from '@/components/common/navigation/Navigation'

export default {
  data () {
    return {
      tableHeight: window.innerHeight - 223,
      navMsg: [
        {
          name: '订单',
          path: '/orders'
        }, {
          name: '订货单',
          path: '/orders'
        }
      ],
      searchData: [
        {
          numberingBox: true
        },
        [
          {
            placeholder: '请选择单据状态',
            classificationList: [],
            labelList: ['待提交', '待订单审核', '待财务审核', '待出库', '待发货', '待收货', '已完成', '已作废']
          }
        ],
        {
          gaojiseach: true,
          daochu: true,
          daoru: true,
          add: true
        }
      ],
      ordersData: [
        {
          num: {
            num: 'DH201904290000001',
            id: []
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥2,532.50',
          waitPrice: '￥0',
          billStatus: 1,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 2,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥10.00',
          waitPrice: '￥2,522.50',
          billStatus: 3,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 4,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 5,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 6,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: []
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥2,532.50',
          waitPrice: '￥0',
          billStatus: 1,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 2,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥10.00',
          waitPrice: '￥2,522.50',
          billStatus: 3,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 4,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 5,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 6,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        }
      ]

    }
  },
  created () {
    setTimeout(() => {
      if (document.getElementsByClassName('zuofei').length > 0) {
        for (var i = 0; i < document.getElementsByClassName('zuofei').length; i++) {
          document.getElementsByClassName('zuofei')[i].parentElement.parentElement.parentElement.parentElement.classList.add('zuofei')
        }
      }
    }, 200)
  },
  components: {
    VCommonHeaderLeft,
    NavSearch,
    Paging,
    navigation
  },
  methods: {
    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 223
        that.tableHeight = window.tableHeight
      })()
    }
  }
}
</script>
<style lang="scss" scoped>
.orders {
  width: 100%;
  margin-right: 10px;
  overflow: hidden;
  /deep/ table {
    thead {
      tr {
        th {
          font-size: 12px;
          font-weight: 400;
          padding: 5px 0;
          border-top: 1px #f3f3f3 solid;
          background-color: #fcfcfc;
        }
      }
    }
    tbody {
      tr {
        td {
          font-size: 12px;
          padding: 5px 0;
          height: 50px;
          .ordernum {
            .te,
            .dai {
              display: inline-block;
              width: 18px;
              height: 18px;
              text-align: center;
              line-height: 18px;
              margin-right: 5px;
              border-radius: 3px;
            }
            .te {
              background-color: #7ed321;
              color: #fff;
            }
            .dai {
              background-color: #7dcdf3;
              color: #fff;
            }
          }
        }
      }
      .zuofei {
        color: #999;
      }
    }
  }
}
</style>
